<template>
	<div class="container">
		<div class="content">
			<div class="left">收支明细报表</div>
			<div class="right">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item>首页</el-breadcrumb-item>
					<el-breadcrumb-item>账户管理</el-breadcrumb-item>
					<el-breadcrumb-item><a href="#">收支明细报表</a></el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div>
		<hr class="margin-h">
		<div class="dayDown-date">
			<div class="dayDown-filter">
				<span>选择日期下载日交易对账单：</span>
				<el-select v-model="value1" placeholder="请选择年份">
					<el-option v-for="(item,index) in year" :key="index" :value="item">
					</el-option>
				</el-select>
				<el-select v-model="value2" placeholder="请选择月份" style="margin-left: 30px;">
					<el-option v-for="(item,index) in month" :key="index" :value="item">
					</el-option>
				</el-select>
			</div>
			<div class="dayDown-calendar">
				<el-calendar v-model="calendar">
				</el-calendar>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				year: [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016,
					2017, 2018, 2019, 2020, 2021
				],
				month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
				value1: '',
				value2: '',
				calendar: '',
			}
		},
		watch: {
			value1: 'getDate',
			value2: 'getDate'
		},
		methods: {
			getDate() {
				if (this.value1 == '' && this.value2 == '') {
					this.calendar = new Date();
				} else {
					this.calendar = new Date(this.value1, this.value2 - 1, 1)
				}
			},
		},
	}
</script>

<style scoped="scoped">
	.obj {
		margin: 25px 20px;
		color: #333;
		font-size: 13px;
	}

	.container {
		width: 100%;
	}

	.content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 17px;
		margin: 25px 20px;
		padding-left: 10px;
		border-left: 1px solid #0075D2;
	}

	.margin-h {
		margin-left: 20px;
		margin-right: 20px;
	}

	a {
		font-weight: 700 !important;
	}

	hr {
		margin: 0;
		padding: 0;
		border: none;
		border-bottom: 1px solid #ddd;
		height: 0;
	}

	.dayDown-date {
		width: 97%;
		height: 100%;
		margin-top: 35px;
		margin-left: 20px;
	}
	.dayDown-date .dayDown-filter{
		margin-left: 30px;
	}

	.dayDown-date .dayDown-filter>span {
		display: inline-block;
		font-size: 13px;
		margin-right: 10px;
	}
</style>
<style>
	.el-breadcrumb__inner {
		color: #666666 !important;
	}

	.el-breadcrumb {
		font-size: 12px !important;
	}

	.dayDown-calendar {
		width: 100%;
		border: 1px solid #e1e1e1;
		margin-top: 30px;
	}

	.dayDown-calendar .el-calendar__header .el-calendar__button-group {
		display: none;
	}

	.dayDown-calendar .el-calendar__body thead {
		width: 100%;
		background-color: #f5f6fa !important;
	}

	.dayDown-calendar .el-calendar__body thead th {
		height: 40px !important;
		padding: 0 !important;
	}

	.dayDown-calendar .el-calendar__body tbody {
		box-sizing: content-box;
		padding-top: 20px !important;
	}

	.dayDown-calendar .el-calendar__body tbody tr {
		border: none;
	}

	.dayDown-calendar .el-calendar__body tbody tr td {
		background-color: #f4f4f4 !important;
	}

	.dayDown-calendar .el-calendar__body tbody tr td .el-calendar-day {
		height: 35px !important;
		text-align: center;
		border: none;
		padding: 0;
		line-height: 35px;
	}

	.dayDown-calendar .el-calendar__body tbody tr td .el-calendar-day:hover {
		background-color: #e5e5e5 !important;
	}

	.dayDown-calendar .el-calendar__body tbody tr td.is-selected {
		background-color: #e5e5e5 !important;
		color: #ff557f !important;
	}
</style>
